<template>
  <el-card :bordered="false" class="addShop">
    <el-page-header
      @back="$router.go(-1)"
      style="margin-bottom: 10px"
    ></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="门店名称：" prop="shopName">
              <el-input
                v-model="ruleForm.shopName"
                :maxLength="30"
                placeholder="请输入门店名称"
                style="width: 45%"
                :disabled="this.$route.query.isEdit == 'true'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="门店归属：" prop="shopType">
              <el-select
                v-model="ruleForm.shopType"
                placeholder="请选择门店归属"
                :disabled="this.$route.query.isEdit == 'true'"
                style="width: 45%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in mdguishuList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="所属业务：" prop="businessType">
              <el-checkbox-group
                v-model="ruleForm.businessType"
                :disabled="this.$route.query.isEdit == 'true'"
                style="width: 45%"
              >
                <el-checkbox
                  v-for="i in yewuList"
                  :key="i.value"
                  :label="i.value"
                  >{{ i.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="门店区域：" required>
              <v-distpicker
                :province="ruleForm.provinceCode"
                :city="ruleForm.cityCode"
                :area="ruleForm.districtCode"
                @selected="selected"
                :disabled="this.$route.query.isEdit == 'true'"
                style="width: 80%"
              ></v-distpicker>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="门店位置：" required>
              <div class="mdweizhi">
                <el-form-item prop="longitude" label class="jwd">
                  <span>经度</span>
                  <el-input-number
                    v-model="ruleForm.longitude"
                    controls-position="right"
                    disabled
                  ></el-input-number>
                </el-form-item>
                <el-form-item prop="latitude" label class="jwd">
                  <span>纬度</span>
                  <el-input-number
                    v-model="ruleForm.latitude"
                    controls-position="right"
                    disabled
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label prop="yewu">
              <el-input
                id="suggestId"
                class="input_style"
                name="address_detail"
                v-model="address_detail"
                show-action
                label="地址"
                style="width: 70%; margin-bottom: 10px"
                placeholder="请输入搜索关键词"
              ></el-input>
              <!-- <el-button
                @click="onSure"
                type="primary"
                v-if="!(this.$route.query.isEdit == 'true')"
                >确认获取经纬度</el-button
              > -->
              <!-- <div id="allmap"></div> -->
              <div id="all-map" class="map" ></div>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item
              v-for="(item, index) in ruleForm.deliveryXiaoQu"
              :label="'配送小区' + (index + 1) + '：'"
              :key="index"
              :prop="'deliveryXiaoQu.' + index + '.communityNames'"
              :rules="{
                required: true,
                message: '配送小区不能为空',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.communityNames"
                placeholder="请输入配送小区"
                :disabled="$route.query.isEdit == 'true'"
                style="width: 53%; margin: 0 6px 30px 0"
              ></el-input>
              <el-button
                type="text"
                html-type="submit"
                @click.prevent="addKchs()"
                v-if="
                  ruleForm.deliveryXiaoQu.length == index + 1 &&
                  !($route.query.isEdit == 'true')
                "
                >新增</el-button
              >
              <el-button
                type="text"
                html-type="submit"
                @click.prevent="editKchs(item)"
                v-if="
                  ruleForm.deliveryXiaoQu.length > 1 &&
                  !($route.query.isEdit == 'true')
                "
                >删除</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>
      <div class="content">
        <span v-if="!(this.$route.query.isEdit == 'true')">
          <el-button
            @click="save('ruleForm')"
            type="primary"
            :loading="loading"
            v-if="!this.$route.query.id"
            >保存</el-button
          >
          <el-button
            @click="upDatasave('ruleForm')"
            :loading="loading"
            type="primary"
            v-else
            >修改</el-button
          >
        </span>
        <el-button @click="quxiao('ruleForm')">取消</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.addShop {
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
  .mdweizhi {
    display: flex;
    .jwd {
      span {
        padding-right: 10px;
      }
      .el-form-item__label {
        text-align: right;
        width: 50px !important;
      }
      .el-form-item__content {
        margin-left: 0px !important;
        margin-right: 20px;
      }
    }
  }
  #suggestId {
    width: 40rem;
    height: 3rem;
  }
  #allmap {
    width: 40rem;
    height: 40rem;
    border: 1px solid #ccc;
  }
  .el-input-number__increase {
    display: none !important;
  }
  .el-input-number__decrease {
    display: none !important;
  }

  .map {
    width: 600px;

    height: 600px;
  }
}
</style>
